<template>
	<view>
		<view class="spread">
			<image class="top" :src='this.commonImg() + "tg-1.png"' mode="widthFix"></image>
		</view>

		<!-- <view class="card-item">
			<view class="top_title">
				<text>我的分销</text>
				<text class="btn" @click="tohdgz()">推荐规则</text>
			</view>
		</view> -->

		<view class="agent">
			<view class="head">
				<text @click="typeClick(index)" v-for="(item, index) in typeArr" :key="index"
					:class="[activeTypeIndex==index?'on':'']">{{item.name}}</text>
			</view>
			<!-- 	<view v-if="activeTypeIndex==0">
				<view class="t rank">
					<block v-for="(item,index) of list1" :key="index">
						<li class="t_01">
							<view class="t_01_1 flex">
								<text class="mc">{{index+1}}</text>
								<text>{{item.user.user_name}}</text>
							</view>
							<view class="t_01_1 price">
								<text>收入金额：</text>
								¥{{item.price}}
							</view>
						</li>
					</block>
					<view class="nodata" v-if="total1==0">
						<image :src='this.commonImg() + "nodata.png"'  alt=""></image>
						<p>暂时没有数据哦~</p>
					</view>
				</view>
			</view> -->
			<view v-if="activeTypeIndex==0">
				<view class="t rank">
					<block v-for="(item,index) of list2" :key="index">
						<li class="t_01">
							<view class="t_01_1 flex">
								<text class="mc">{{index+1}}</text>
								<text>{{item.user_name}}</text>
							</view>
							<view class="t_01_1 price">
								{{item.ctime}}
							</view>
						</li>
					</block>
					<view class="nodata" v-if="total2==0">
						<image :src='this.commonImg() + "nodata.png"' alt=""></image>
						<p>暂时没有数据哦~</p>
					</view>
				</view>
			</view>
			<view v-if="activeTypeIndex==1">
				<view class="t rank">
					<block v-for="(item,index) of list3" :key="index">
						<li class="t_01">
							<view class="t_01_1 flex">
								<text class="mc">{{index+1}}</text>
								<text>{{item.user.user_name}} 回收成功</text>
							</view>
							<view class="t_01_1 price">
								<text>获得奖励：</text>
								¥{{item.price}}
							</view>
						</li>
					</block>
					<view class="nodata" v-if="total3==0">
						<image :src='this.commonImg() + "nodata.png"' alt=""></image>
						<p>暂时没有数据哦~</p>
					</view>
				</view>
			</view>
		</view>
		<view class="heignt"></view>
		<view class="save">
			<view class="btn" @tap="toHaibao()">
				生成专属海报
			</view>
			<button class="btn two" open-type="share">
				分享专属链接
			</button>
		</view>
		<!-- 推荐规则弹框 -->
		<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="isHdgz"></view>
		<view class="modal-dialog two" v-if="isHdgz">
			<view class="modal-content">
				<view class="title">推荐规则</view>
				<view>
					1: 点击下方推荐按钮将海报或链接分享给好友，好友点击分享链接或扫码进入小程序，进入小程序之后将成为您的推荐好友，推荐好友下单完成回收后，平台将根据重量和合伙人等级进行相对应的佣金奖励
				</view>
				<view>2: 初级合伙人推荐好友直接下单完成回收后，可获得每公斤0.2元佣金奖励，没有间推奖励
				</view>
				<view>3:
					中级合伙人推荐好友直接下单完成回收后，可获得每公斤0.3元佣金奖励。间接推荐好友下单完成回收后，可获得每公斤0.1元佣金奖励。并且可以推荐中级合伙人，高级合伙人，推荐成功平台将根据上级个数平均分佣

				</view>
				<view>4:
					高级合伙人推荐好友直接下单完成回收后，可获得每公斤0.4元佣金奖励。间接推荐好友下单完成回收后，可获得每公斤0.1元佣金奖励。并且可以推荐中级合伙人，高级合伙人，推荐成功平台将根据上级个数平均分佣
				</view>
				<button @tap="toclose()">
					确认
				</button>
			</view>
		</view>

		<!-- 二维码弹框 -->
		<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="isCode"></view>
		<view class="modal-dialog" v-if="isCode">
			<view class="modal-content">
				<image class="code" :src="profile" mode="widthFix"></image>
				<view class="button">
					<button @click="handledownload()">
						保存图片
					</button>
					<button class="close" @tap="toclose()">
						关闭
					</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pid: '',
				list: [],
				list1: [],
				total1: 0,
				list2: [],
				total2: 0,
				list3: [],
				total3: 0,
				isHdgz: false,
				isCode: false,
				profile: '',
				share: '',
				activeTypeIndex: 0,
				typeArr: [{
						name: '邀请记录',
					},
					{
						name: '收入记录',
					}
				],
				direct_count: 0,
				distribution_count: 0,
				income: 0,
				grade: {},
				grade_id: 0,
			};
		},
		onLoad() {
			this.$api.http.get('user-grade-static', {}).then(res => {
				if (res.code == 1) {
					this.grade_id = res.data.member.grade_id
					this.grade = res.data.grade
					this.profile = res.data.poster
					this.share = res.data.share.content
					this.pid = res.data.pid
				}
			})
			// 订单总排行
			this.$api.http.get('order-ranking-main-list', {}).then(res => {
				if (res.code == 1) {
					this.list1 = res.data.list
					this.total1 = res.data.list.length
				}
			})
			// 邀请记录
			this.$api.http.get('user-invite-list', {}).then(res => {
				if (res.code == 1) {
					this.list2 = res.data.list
					this.total2 = res.data.list.length
				}
			})

			//收入记录
			this.$api.http.get('order-income-list', {
				state: 2,
			}).then(res => {
				if (res.code == 1) {
					this.list3 = res.data.list
					this.total3 = res.data.list.length
				}
			})
		},
		methods: {
			onShareAppMessage() {
			
				const that=this
					console.log(that.pid)
				return {
					title: '衣之光回收',
					path: '/pages/tabBar/order/add?pid=' + that.pid,
					imageUrl: that.share,
				}
			},

			handledownload() {
				const that = this
				uni.getSetting({ //获取用户的当前设置
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.saveImageToPhotosAlbum();
						} else {
							uni.authorize({ //如果没有授权，向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImageToPhotosAlbum();
								},
								fail: () => {
									uni.showModal({
										content: '检测到您没打开保存图片的权限，是否去设置打开？',
										confirmText: "确认",
										cancelText: '取消',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: (res) => {
														console.log(res);
													}
												})
											} else {
												console.log('取消');
												return false;
											}
										}
									})
									setTimeout(() => {
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: (res2) => {
												console.log(res2.authSetting)
											}
										});
									}, 3000);
								}
							})
						}
					}
				})
			},
			saveImageToPhotosAlbum() {
				let base64 = this.profile.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
				let filePath = wx.env.USER_DATA_PATH + '/hym_pay_qrcode.png';
				uni.getFileSystemManager().writeFile({
					filePath: filePath, //创建一个临时文件名
					data: base64, //写入的文本或二进制数据
					encoding: 'base64', //写入当前文件的字符编码
					success: res => {
						uni.saveImageToPhotosAlbum({
							filePath: filePath,
							success: function(res2) {
								uni.showToast({
									title: '保存成功',
									duration: 2000
								})
							},
							fail: function(err) {
								uni.showToast({
									title: '保存失败',
									duration: 2000
								})
							}
						})
					},
					fail: err => {
						uni.showToast({
							title: '保存失败',
							duration: 2000
						})
					}
				})
			},
			typeClick(index) {
				this.activeTypeIndex = index
			},
			toHaibao() {
				this.isCode = true
			},
			toclose() {
				this.isCode = false
				this.isHdgz = false
			},
			tohdgz() {
				this.isHdgz = true
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F4F4;
	}

	.spread {
		position: relative;
		z-index: 1;

		.top {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	.card-item {
		background-color: #fff;
		border-radius: 15rpx;
		width: 94%;
		margin: -65rpx auto 0;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 2;

		.top_title {
			line-height: 45rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;

			text {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}

			.btn {
				font-size: 26rpx;
				background: #fbb434;
				color: #fff;
				padding: 6rpx 25rpx;
				border-radius: 30rpx;
				font-weight: normal;
			}
		}

		.card-item-content {
			padding: 20rpx 5%;
			justify-content: space-between;
			display: flex;
			align-items: center;

			.item {
				text-align: center;

				text {
					display: block;
					color: #21A56C;
					font-size: 40rpx;
				}

				view {
					color: #999;
					font-size: 26rpx;
				}
			}
		}
	}

	.agent {
		margin-top: 20rpx;
		background: #fff;

		.head {
			text-align: center;
			padding: 0 10%;
			font-weight: bold;
			border-bottom: 1px solid #eee;
			display: flex;
			justify-content: space-between;

			text {
				font-size: 28rpx;
				color: #999;
				line-height: 3
			}

			text.on {
				color: #333;
				border-bottom: 1px solid #21A56C;
			}
		}

		.t_tou {
			display: flex;
			padding: 10px 0;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 26upx;
			background: #F5F5F5;
		}

		.tou_1 {
			width: 33.333%;
			text-align: center;
			color: #999;
			font-weight: bold;
		}

		.t_01 {
			display: flex;
			height: 100upx;
			line-height: 100upx;
			border-bottom: 1px solid #eee;
		}

		.t.rank {
			.t_01 .t_01_1 {
				width: 50%;
				justify-content: initial;
				box-sizing: border-box;

				.mc {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: #e9fff5;
					color: #21A56C;
					border-radius: 50%;
					margin-left: 0;
					margin-right: 40rpx;
					font-size: 24rpx;
				}
			}

			.t_01:nth-child(1) .mc,
			.t_01:nth-child(2) .mc,
			.t_01:nth-child(3) .mc {
				color: #fff;
				font-weight: bold;
				border-radius: 0;
			}

			.t_01:nth-child(1) .mc {
				background: url('../../../static/img/ph1.png') no-repeat center;
				background-size: auto 40rpx;
			}

			.t_01:nth-child(2) .mc {
				background: url('../../../static/img/ph2.png') no-repeat center;
				background-size: auto 40rpx;
			}

			.t_01:nth-child(3) .mc {
				background: url('../../../static/img/ph3.png') no-repeat center;
				background-size: auto 40rpx;
			}
		}

		.t_01_1 {
			width: 34%;
			text-align: center;
			font-size: 26rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.t_01_1.flex {
			display: flex;
			align-items: center;
			padding-left: 7%;

			text {
				margin-left: 10rpx;
			}
		}

		.t_01_1 img {
			width: 60upx;
			height: 60upx;
			border-radius: 60upx;
		}

		.t_01_1.price {
			color: #21A56C;

			text {
				color: #999;
			}
		}

	}

	/* ---弹窗css--- */
	.modal-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		color: #fff;
		z-index: 998;
	}

	.modal-dialog {
		width: 72%;
		position: fixed;
		top: 20%;
		left: 14%;
		background: #fff;
		border-radius: 12rpx;
		z-index: 999;
	}

	.modal-dialog.two {
		top: 6%;
	}

	.modal-content {
		text-align: left;
		line-height: 40rpx;
		padding: 40rpx;

		.code {
			width: 100%;
		}

		.tishi {
			font-size: 28rpx;
			text-align: center;
		}

		.title {
			font-weight: bold;
			font-size: 30rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.show {
			width: 300rpx;
			height: 105rpx;
			display: block;
			margin: 50rpx auto 30rpx;
			z-index: 10000;
		}

		view {
			font-size: 22rpx;
			color: #333333;
			margin-bottom: 10rpx;
			line-height: 1.5;
		}

		view.bold {
			font-weight: bold;
		}

		button {
			width: 85%;
			height: 75rpx;
			line-height: 75rpx;
			border-radius: 60rpx;
			margin: 36rpx auto 0;
			font-size: 28rpx;
			color: #fff;
			background: #21A56C;
			padding: 0;
		}

		.button {
			display: flex;
			align-items: center;
			justify-content: space-between;

			button {
				margin: 36rpx 0 0;
				width: 48%;
				border: 1px solid #21A56C;
			}

			.close {
				background: #fff;
				color: #21A56C;
			}
		}
	}

	.heignt {
		height: 160rpx;
		width: 100%;
	}

	.save {
		view {
			display: flex;
		}

		left: 0;
		right: 0;
		position: fixed;
		bottom: 0;
		height: 140rpx;
		display: flex;
		justify-content:center;
		align-items: center;
		background: #fff;
		padding: 0 20rpx;
		z-index: 990;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
		box-sizing: border-box;

		.btn {
			width: 40%;
			height: 75rpx;
			border-radius: 75rpx;
			background: #fbb434;
			border: 1px solid #fbb434;
			color: #ffffff;
			justify-content: center;
			align-items: center;
			font-size: 30upx;
			animation: zoomInOut 2s infinite;
			margin: 0 30rpx;
		}

		.btn.two {
			background: #fe1212;
			border: 1px solid #fe1212;
			color: #ffffff;
		}
	}

	/* 定义放大缩小动画 */
	@keyframes zoomInOut {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
			/* 放大1.5倍 */
		}
	}
</style>